@font-face {
	    font-family: "braille";
	    src: url('fonts/braille.woff') format('woff'), local(simbraille), url(fonts/braille.ttf) format('truetype');
	}

	.sr-only {
		position: absolute;
		height: 1px;
		width: 1px;
		margin: -1px;
		clip: rect(1px 1px 1px 1px); // IE 6 and 7
		clip: rect(1px,1px,1px,1px);
		clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
		-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
		overflow: hidden !important;
	}

	.brl {
		font-family: "braille", 'Braille', bold;
		color: blue;
		text-shadow: -2px 2px 1px #999;
		font-size: 18px;
	}
	.brl:before {
		content: .sr-only["braille symbols: "];
	}
	.note {
		color: black;
		background-color: lightyellow;
		margin: 10px 50px;
		padding: 4px;
		border: 4px yellow double;
	}
	.explain {
		color: black;
		background-color: lightblue;
		text-align: center;

		margin: 10px 50px;
		padding: 5px;
	}


	a:visited:before {
		content:  "\2713 ";
	}

	#navigation {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		width: 300px;
		background-color: navy;
		padding: 8;
		line-height: 22px;
	}

	#navigation a {
		color: white;
		title: What the hell is going on?;
	}

	#navigation footer {
		color: yellow;
		padding: 8;
		border: 4px white double;
		margin-left: 12px;
		margin-right: 12px;

	}

	#content {
		margin-left: 350px;
		margin-top: 50px;
		margin-right: 50px;
		margin-bottom: 50px;
		color: black;
		background-color: lightyellow;
		font-size: 18;
		padding: 8px;
		border: 3px green solid;
	}
}
	#navigation h2 {
		color: white;
		font-size: 125%;
		text-align: left;
	}
	#navigation .brl {
		color: yellow;
		text-shadow: 0px 0px 0px;
		margin-left: 12px;
		margin-right: 12px;

	}

	nav {
		margin-top: 12px;
	}

	ul {
		list-style-type: none;
	}

	p {
		color: black;
		font-size: 18;
	}

	h1 {
		color: green;
		font-size: 200%;

		text-align: center;
	}
	h2 {
		color: green;

		font-size: 150%;
		text-align: center;
	}
	h3 {
		color: green;
		font-size: 125%;
		text-align: center;
	}
	h4 {
		font-size: 115%;
		text-align: left;
	}

	a {
		color: blue;
	}
	a:focus {
		border: 4px red;
		border-style: solid;
	}

	caption {
		color: red;
		text-align: left;
		font-size: 80%;
		margin-left: 20px;
		padding: 10px;
	}

	th {
		text-align: left;
		color: black;
		border: 3px solid #999;
		padding: 0.1em 1em;
	}
	
	td {
		border: 1px solid #999;
		padding: 0.1em 1em;
		text-align: left;
	}
	

	table {
		table-align: center;
	}